<template>
  <div class="selectInfo">
    <!-- 头部 -->
    <!-- <mt-header fixed title="筛选">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
    </mt-header>-->

    <!-- 主体部分 -->
    <div class="bscroll" ref="bscroll6">
      <div class="bscroll-container">
        <div class="select-body">
          <div style="background-color: #ffffff;">
            <div class="salary">薪资待遇</div>
            <input v-model="salary" placeholder="请输入薪资" name="salary" type="number" />
            <div class="city-choice">城市选择</div>
            <input v-model="city" placeholder="请输入城市" name="city" type="text" />
            <div class="edu-require">学历要求</div>
            <div class="edu-box">
              <span id="5" :class="sty1" @click="select($event)">全部</span>
              <span id="0" :class="sty[0].a" @click="select($event)">大专</span>
              <span id="1" :class="sty[1].a" @click="select($event)">本科</span>
              <span id="2" :class="sty[2].a" @click="select($event)">硕士</span>
              <span id="3" :class="sty[3].a" @click="select($event)" class="doctor">博士</span>
              <span id="4" :class="sty[4].a" @click="select($event)" class="other">其他</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="select-foot">
      <span class="clear" @click="clear()">清除</span>
      <span class="finish" @click="finish()">完成</span>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
import { Indicator, Toast } from "mint-ui";
import { log } from "util";
export default {
  data() {
    return {
      sty1: "all",
      sty: [{ a: "" }, { a: "" }, { a: "" }, { a: "" }, { a: "" }],
      salary: "",
      city: null,
      edu: null
    };
  },
  methods: {
    select(e) {
      // console.log(e.target.id)
      if (e.srcElement.id != 5) {
        this.sty.forEach(item => {
          item.a = "";
        });
        this.sty[e.target.id].a = "all";
        this.sty1 = "";
        this.edu = e.srcElement.id;
      } else if (e.srcElement.id == 5) {
        this.edu = "";
        this.sty1 = "all";
        this.sty.forEach(item => {
          item.a = "";
        });
      }
    },
    clear() {
      (this.salary = ""),
        (this.city = null),
        (this.sty = [{ a: "" }, { a: "" }, { a: "" }, { a: "" }, { a: "" }]),
        (this.sty1 = "");
      this.edu = null;
    },
    finish() {
      let params = {
        page: 1,
        pageSize: 1000,
        salary: Number(this.salary),
        city: this.city,
        kind: +this.$route.query.kind,
        recommended: +this.$route.query.recommended,
        edu: this.edu == null ? null : Number(this.edu)
      };

      this.$store.state.selectParams = params;
      this.$store.state.back = 2;
      this.$router.push({ path: "/talentIntroduce", query: this.city });
    },
    initScroll(dom) {
      this.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        console.log(bscrollDom);
        this.aBScroll = new BScroll(bscrollDom, {
          click: true
        });
      });
    }
  },
  mounted() {
    this.initScroll("bscroll6");
    setText("筛选");
  }
};
</script>

<style lang="less">
@import url("~@/pagecss/select-info.less");
.doctor {
  margin-right: 10/75rem;
}
.other {
  margin-right: 340/75rem;
}
.select-foot {
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>